<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_higd'>
					<view class='flex flex-wrap align-center fd0_0_c0_higd' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='fd0_0_c1_c0_higd'>{{$t('错题本')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center"> 
				<view>
					<benben-flex-tabs class-name='benbenTabsfd1_0_higd' v-model="tabsTypefd1_0" ref="benben_tabsfd1_0"
						select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false'
						:open-sticky='true' :top="88" :is-show-content='false' :scrollspy='false'
						:tabs-info.sync="tabsInfofd1_0">

						<scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
							class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0.moveX"
							scroll-with-animation="all .3s ease" :show-scrollbar='false' :enhanced="true">
							<view class="benben-tabs-content" id="benben_tabsfd1_0-content">
								<view id="benben_tabsfd1_0-title"
									class="benben-tabs-title flex flex align-center justify-around">
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '1', 'flex flex-wrap align-center': true }"
										@tap="check(1)" :id="`benben_tabsfd1_0-title-item-${'1'}`">

										<text>{{$t('课程练习')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '2', 'flex flex-wrap align-center': true }"
										@tap="check(2)" :id="`benben_tabsfd1_0-title-item-${'2'}`">

										<text>{{$t('考试错题')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '3', 'flex flex-wrap align-center': true }"
										@tap="check(3)" :id="`benben_tabsfd1_0-title-item-${'3'}`">

										<text>{{$t('自由练习')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '4', 'flex flex-wrap align-center': true }"
										@tap="check(4)" :id="`benben_tabsfd1_0-title-item-${'4'}`">

										<text>{{$t('错题巩固')}}</text>

									</view>
								</view>
								<view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
									id="benben_tabsfd1_0-line"
									class="benben-tabs-line flex benben-flex-tabs-line linefd1_0_higd"
									:class="{'benben-tabs-line-active':tabsInfofd1_0.isInit}"></view>
							</view>
						</scroll-view>

					</benben-flex-tabs>

				</view>
				<view class='flex flex-direction align-stretch flex-sub fd1_1_higd'>
					<template v-for='(item,key0) in list'>
						<view class='flex flex-direction align-stretch fd1_1_c0_higd' :key='key0' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pagexxzx/ctbdetail/ctbdetail?id=${item.aid}`">
							<view class='flex flex-wrap align-center'>

								<view class='flex  fd1_1_c0_c0_c0_higd'></view>

								<text class='fd1_1_c0_c0_c1_higd'>{{item.topic_type_name}}</text>
							</view>
							<view class='flex flex-wrap align-center fd1_1_c0_c1_higd'>
								<text>{{item.title}}</text>
							</view>
							<view class='flex flex-wrap align-center' style="color: #999999;">
								<text>难易程度：</text>
								<view class='flex flex-wrap align-center'>
									<template v-for="starNum in [1,2,3,4,5]">
										<image v-if="item.start >= starNum" :key="starNum" class='star1fd1_1_c0_c2_c1_higd'
											mode="aspectFit" :src='STATIC_URL+"257.png"'></image>
										<image v-else :key="starNum" class='star1fd1_1_c0_c2_c1_higd' mode="aspectFit"
											:src='STATIC_URL+"258.png"'></image>
									</template>
								</view>
								<text>{{item.level==1?'简单':item.level==2?'中等':'困难'}}</text>
							</view>
						</view>
					</template>

				</view>
			</view>
			<view class="nolist" v-if="list.length==0 && isshow">
				<image :src="benbenImageSrcResolution('order.png', 'global')"></image>
				<view class="txt">暂无数据</view>
			</view>
			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"tabsInfofd1_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				"tabsTypefd1_0": "1",
				"list": [],
				isshow:false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getxc8679284470b4Func()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.getxc8679284470b4Func()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//查询错题本题目列表
			async getxc8679284470b4Func() {
				//请求方法
				//数据验证

				let datalist = await this.$api.get(global.apiUrls.post68679284470b4, {
					type: this.tabsTypefd1_0==1?2:this.tabsTypefd1_0==2?1:this.tabsTypefd1_0
				});

				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				this.isshow=true
				let infolist = datalist.data;
				this.list = infolist.data.map(item=>{
					if(item.level==1){
						item.start=1
					}else if(item.level==2){
						item.start=3
					}else{
						item.start=5
					}
					return item
				})

			},
			check(index) {
				this.tabsTypefd1_0 = index
				this.getxc8679284470b4Func()
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
.nolist {
			width: 100%;
			text-align: center;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
		.checkTitlefd1_0_higd {
			font-weight: 700 !important;
			font-size: 28rpx !important;
			color: #333 !important;
			background-color: rgba(255, 255, 255, 1) !important;
		}

		.linefd1_0_higd {
			width: 100rpx;
			height: 8rpx;
			top: 80rpx;
			background: #d53215;
			background-size: 100% auto !important;
		}

		.fd1_1_higd {
			padding: 20rpx 32rpx 20rpx 32rpx;

			.fd1_1_c0_higd {
				padding: 32rpx;
				background: #FFFFFF;
				width: 686rpx;
				border-radius: 16rpx;
				margin-bottom: 32rpx;

				.fd1_1_c0_c0_c0_higd {
					width: 1rpx;
					height: 30rpx;
					background: var(--benbenbgColor0);
					margin: 0rpx 10rpx 0rpx 10rpx;
					transform: scaleX(0.5);
				}

				.fd1_1_c0_c0_c1_higd {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}

				.fd1_1_c0_c1_higd {
					margin: 32rpx 0rpx 32rpx 0rpx;
				}

				.star1fd1_1_c0_c2_c1_higd {
					height: 32rpx;
					margin: 0rpx 5rpx 0rpx 5rpx;
					width: 32rpx;
				}
			}
		}

		.flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.fd0_0_c0_higd {
			width: 120rpx;

			.fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	::v-deep .benbenTabsfd1_0_higd {
		width: 750rpx;
		height: 90rpx;
		white-space: nowrap;
		background: #fff;
		text-align: center;
	}
</style>
